<template>
  <div>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="addOne" v-model="msg" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props:['todos','addOneTodo'],
  data(){
    return {
      msg:''
    }
  },
  methods:{
    addOne(){
      // console.log(this.msg);
      // 步骤：
      // 1.判断输入是否为空
      // 2.如果没有内容，不添加todo,做出提示
      // 3.如果有内容，判断内容是否有重复，不重复才可添加todo，重复则提示

      
      if(!this.msg.trim()){// 内容为空
        alert('内容不能为空！')
      }else{
        // 内容不为空
        // 判断内容是否重复
        // 返回值如果true,代表有重复,false代表没有重复
        const result = this.todos.some(item => item.content === this.msg)
        if(!result){
           // 没有重复
          let todo = {id:Date.now(),content:this.msg,isOver:false}
          this.addOneTodo(todo)
          
        }else{
          alert('不要输入重复的内容！')
        }
      }
      // 清空表单内容
      this.msg = ''     
    },
  }
}
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}
.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
<!-- 
  添加功能
 -->